<template>
  <el-form class="main-container-main__form" :model="form" :rules="rules" ref="form" :disabled="loading"
           @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
  >
    <el-form-item class="main-container-main__item" prop="username">
      <el-input class="main-container-main__input" v-model="form.username" placeholder="请输入账户名或者手机号码" auto-complete="off">
        <template slot="prepend">
          <svg-icon icon-class="user"></svg-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="main-container-main__item" prop="password" :error="!isNeedImgCode  ? formError : ''">
      <password-input v-model="form.password" placeholder="请输入密码" auto-complete="off"></password-input>
    </el-form-item>

    <el-form-item class="main-container-main__item" v-if="isNeedImgCode" prop="imgCode" :error="formError">
      <el-input v-model="form.imgCode" placeholder="请输入验证码" auto-complete="off">
        <template slot="prepend">
          <svg-icon icon-class="login-security"></svg-icon>
        </template>
        <template slot="append">
          <validate-img ref="validateImg" />
        </template>
      </el-input>
    </el-form-item>
    <Captcha :callback="getResult" :showCaptcha="showCaptcha" :captchaClose="captchaClose" ></Captcha>
    <div class="main-container-main__item main-container-main__item--submit">
      <el-button  type="primary" :loading="loading" native-type="submit" block>登录</el-button>
    </div>
  </el-form>
</template>

<script>
  import {factory, form} from '@/build';
  import Captcha from '@/components/captcha';
  export default {
    name: "account-login",

    mixins: [form],
    components: {
      Captcha
    },
    
    data() {
      return {
        form: {
          username: '',
          password: '',
          // imgCode: ''
          validate: '',
        },
        formError: '',
        rules: {
          // username: factory.getRule('username'),
          username: {
            required: true, message: '请输入账户名或者手机号码'
          },
          password: [
            {required: true, message: '请输入密码'}
          ],
          imgCode: [
            {required: true,message: '请输入验证码'}
          ]
        },

        countdownTimer: undefined,
        countdownTime: consts.COUNT_DOWN_TIME,
        isSending: false,

        security: false,
        isNeedImgCode: false,
  
        captchaStatus: false, //验证是否成功，
        showCaptcha: false, // 是否显示验证,
      };
    },
    
    methods:{
      // 验证码弹窗关闭后
      captchaClose() {
        this.captchaStatus = false;
        this.showCaptcha = false;
      },
      getResult(err, data) {
        this.captchaStatus = data ? !!data.validate : false;
        this.form.validate = data ? data.validate : "";
        this.captchaStatus ? this.doSave({
          action: "saveForm"
        }) : null;
      },
    },

    mounted() {
      this.bindSave(types.LOGIN, 'saveForm', 'form', {
        beforeSend: (data) => {
          this.formError = '';

          return data;
        },
        callback: ({result, data}) => {
          if (!result) {
            this.formError = data.message;
            if (data.code === code.IMG_CODE_ERROR || data.code === code.VALIDATE_CODE) {
              // this.isNeedImgCode = true;
              this.showCaptcha = true;
              this.loading = false;
            }
            // if (this.isNeedImgCode) {
            //   this.$refs.validateImg.change();
            // }
          } else {
            this.$router.push(this.$route.query.redirect || {
              name: 'home'
            });
          }
        }
      });
    },
    beforeDestroy() {
      this.showCaptcha = false;
    },
  };
</script>
